﻿
<meta name="viewport" content="width=device-width" />
<style type="text/css">
    section.content {
        margin: 100px 15px 0 315px;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        margin-left: -5px;
    }

    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc !important;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    /*[type="checkbox"]:not(:checked),
      [type="checkbox"]:checked {
      position: absolute;
      left: -9999px;
      opacity: 0;
     }*/
</style>

<link href="~/Scripts/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />

<script type="text/javascript">

    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
   var Url = "@Url.Action("GetUserInfo")";
   // var Url = "/api/services/app/user/GetAll()";
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
               // url: '../User/GetUsersList',
                url: Url,         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 2,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'UserName',
                    title: '姓名'
                }, {
                    field: 'EmailAddress',
                    title: '邮箱'
                }, {
                    field: 'Surname',
                    title: '真是姓名'
                }, {
                     field: 'Name',
                    title: '角色'
                }, ]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };

  var actionUrl = "@Url.Action("GetUsersList")";
    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
            //查询角色
            $("#btn_query").click(function () {

                m_pagerow = 0;
                $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });

            });
            //新增角色
            $("#btn_add").click(function () {
                $("#id").val("");
                $("#txt_Surname").val("");
                $("#txt_Name").val("");
                $("#txt_UserName").val("");
                $("#txt_isDeleted").val("");
                $("#myModalLabel").text("新增");
                $('#myModal').modal();
            });
            //新增角色
            $("#btn_submit").click(function () {
                var Id = $("#id").val() == "" ? 0 : $("#id").val();
                var Url = "/api/services/app/user/Update";
                var ajaxtype = "put";
                if ($("#id").val() == "") {
                    Url = "/api/services/app/user/Create";
                    ajaxtype = "post";
                }
                var careteorUpdatePerson = function (person, ajaxtype) {
                    return abp.ajax({
                        url: Url,
                        type: ajaxtype,
                        async: false,
                        data: JSON.stringify(person)
                    });
                };

                //接口请求数据结构
                //{
                //    "userName": "string",
                //        "name": "string",
                //            "surname": "string",
                //                "emailAddress": "string@qq.com",
                //                    "isActive": true,
                //                        "roleNames": [
                //                            "admin"
                //                        ],
                //                            "password": "string"
                //}


                var newPerson = {
                     "id": $("#id").val(),
                     "UserName": $("#txt_Surname").val(),
                     "EmailAddress" : $("#txt_Name").val(),
                     "Name": $("#txt_UserName").val(),
                     "Surname": "test",
                     "Password": "123456",
                     roleNames: ["admin"],
                     "isActive": true,
                };

                careteorUpdatePerson(newPerson, ajaxtype).done(function (data) {
                        toastr.warning('操作成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });
            });

            //编辑角色
            $("#btn_edit").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能选择一行进行编辑');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('请选择有效数据');
                    return;
                }
                $("#id").val(arrselections[0].Id);
                $("#txt_Surname").val(arrselections[0].UserName);
                $("#txt_Name").val(arrselections[0].EmailAddress);
                $("#txt_UserName").val(arrselections[0].Name);
                $("#txt_isDeleted").val(arrselections[0].Id);
                $("#myModalLabel").text("修改");
                $('#myModal').modal();

            });


            //通常我们使用ajax会按照如下写法，做一个简单的封装来重用ajax，此处框架可以帮你生成简单的调用方法
            var deletePerson = function (person) {
                return abp.ajax({
                  //  url: abp.appPath + '/api/services/app/user/Delete',
                    url:'/api/services/app/user/Delete',
                    type: 'delete',
                    async: false,
                    data: JSON.stringify(person)
                });
            };
            //删除角色
            $("#btn_delete").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能选择一行进行编辑');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('请选择有效数据');
                    return;
                }
                var Id = arrselections[0].Id;
                var newPerson = {
                    "id": Id
                };
              //直接调用方法，如何生成上面的调用方法可以参考源码中的Abp.Web.Api项目中/ WebApi/ Controllers/ Scripting/ jQuery下的实现
                deletePerson(newPerson).done(function (data) {
                        toastr.warning('操作成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });

            });


            //权限授权
            $("#btn_authorize").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能选择一个角色进行授权');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('请选择有效数据');
                    return;
                }
                var actionUrl = "@Url.Action("AuthorizePermission")";
                var param = { id: arrselections[0].Id };
                ShowModal_Authorize(actionUrl, param, "权限授权");
            });
            //模态框中“权限授权”保存
            var $modal = $("#authorizeModal");
            $("#btnSave", $modal).click(function () {
                var actionUrl = "@Url.Action("AuthorizePermission")";
                SaveModal_Authorize(actionUrl);
            });
            //模态框中“新增编辑角色”保存
            var $formmodal = $("#modal-form");
            $("#btnSave", $formmodal).click(function () {
                var $tb = $("#tb_departments");
                SaveModal($tb);
            });

            /*******弹出表单*********/
            function ShowModal(actionUrl, param, title) {
                debugger;
                var $modal = $("#modal-form");
                //表单初始化
                $(".modal-title", $modal).html(title);
                $("#modal-content", $modal).attr("action", actionUrl);

                $.ajax({
                    type: "GET",
                    url: actionUrl,
                    data: param,
                    beforeSend: function () {
                    },
                    success: function (result) {
                        debugger;
                        $("#modal-content").html(result);
                        $('#modal-form').modal('show');
                    },
                    error: function () {

                    },
                    complete: function () {

                    }
                });
            }


        };

        return oInit;
    };



</script>
<section class="content-header">
    <h1>
        用户明细
        <small>advanced cxdmles</small>
    </h1>
</section>
<section class="content">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">姓名</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">昵称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <button id="btn_authorize" type="button" class="btn btn-info ">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>授权
            </button>

        </div>
        <table id="tb_departments"></table>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="txt_departmentname">姓名</label>
                        <input type="text" name="id" class="form-control" id="id" placeholder="id" style="display:none">
                        <input type="text" name="txt_departmentname" class="form-control" id="txt_Surname" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="txt_parentdepartment">邮箱</label>
                        <input type="text" name="txt_parentdepartment" class="form-control" id="txt_Name" placeholder="邮箱">
                    </div>
                    <div class="form-group">
                        <label for="txt_departmentlevel">真实姓名</label>
                        <input type="text" name="txt_departmentlevel" class="form-control" id="txt_UserName" placeholder="真实姓名">
                    </div>
                    <div class="form-group">
                        <label for="txt_departmentlevel">是否启用</label>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" checked="checked">
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>

</section>


